import React from 'react'
import './TodoMain.css';
import store from '../../../redux/store';
import { asyncCheckTodo, asyncRemoveTodo } from '../../../redux/reducers/todoReducer';

export default function TodoMain() {
  //定义 remove 函数  
  let remove = (id) => {
    return () => {
      store.dispatch(asyncRemoveTodo(id));
    }
  }
  return (
    <ul className="todo-main">
      {
        store.getState().todo.map(item => (<li key={item.id}>
          <label>
            <input type="checkbox" checked={item.done} onChange={(e) => {
              // console.log(e.target.checked);
              // console.log(item.id);
              store.dispatch(asyncCheckTodo(item.id, e.target.checked));
            }} />&nbsp;
            <span className={item.done ? "done" : null}>{item.title}</span>
          </label>
          <button className="btn btn-danger" onClick={remove(item.id)}>删除</button>
        </li>))
      }
    </ul>
  )
}
